<template>
  <div>
    <headerTop></headerTop>
    <headerMin></headerMin>
    <!-- 主体 -->
    <div class="goodsDetails_content wrap bgw">
      <div class="indexes">首页>药师咨询</div>
      <!-- 商品 -->
      <div class="goods">
        <div class="fl imgs">
          <img class="bigImg" :src="goods.goods_img" />
          <div class="list">
            <img class="up" src="@/assets/image/Commoditydetails_Left@2x.png" alt />
            <div class="imgBox">
              <img :key="i" v-for="(v,i) in goods.banners" :src="v" alt />
            </div>
            <img class="down" src="@/assets/image/Commoditydetails_Left@2x.png" alt />
          </div>
        </div>
        <div class="txt fr">
          <p class="one title">{{goods.goods_name}}</p>
          <div class="box">
            <div>
              <div>
                价
                <i></i>
                <i></i>
                <i></i>
                <i></i> 格
              </div>
              <div class="money">￥20.00</div>
            </div>
            <div>
              <div>
                优
                <i></i>
                <i></i>惠
                <i></i>
                <i></i>券
              </div>
              <div class="discount">
                <p>满100-40</p>
              </div>
            </div>
            <div>
              <div>
                活
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>动
              </div>
              <div class="activity">
                <p class="one">
                  <span>满减</span> 满60-30
                </p>
                <p class="one">
                  <span>买赠</span> 该商品买二赠一，买三赠三，买六赠八。
                </p>
              </div>
            </div>
          </div>
          <div class="msg">
            <span>批准字号</span>
            <span>{{goods.license_number}}</span>
          </div>
          <div class="msg">
            <span>生产厂家</span>
            <span>{{goods.factory}}</span>
          </div>
          <div class="num">
            <span>
              数
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
              <i></i> 量
            </span>
            <div class="numbox">
              <span @click="cut()">-</span>
              <input v-model="num" type="text" @input=" num<1 ? num=1:''" maxlength="2" />
              <span @click="add()">+</span>
            </div>
          </div>
          <div class="submit">
            <button @click="cart_add()">加入购物车</button>
            <button @click="GoGoodsOrder()">立即购买</button>
            <p>温馨提示：图片为实物拍摄，若出现新旧包装更换，请以收到实物为准！</p>
          </div>
        </div>
      </div>
      <!-- tab 底部TAB -->
      <div class="tab">
        <div class="tabtitle">
          <div @click="tabTxt = 0" :class="{tabtitleActive:tabTxt == 0}">商品介绍</div>
          <div @click="tabTxt = 1" :class="{tabtitleActive:tabTxt == 1}">参数与规格</div>
          <div @click="tabTxt = 2" :class="{tabtitleActive:tabTxt == 2}">商品评价(1400)</div>
        </div>

        <!-- 商品介绍 -->
        <div v-show="tabTxt == 0" class="introduce">
          <div v-html="goods.content"></div>
        </div>
        <!-- 参数与规格 -->
        <div v-show="tabTxt == 1" class="parameter">
          <div class="list">
            <div class="fl">产品名称</div>
            <div class="fr">{{goods.goods_name}}</div>
          </div>
          <div class="list">
            <div class="fl">产品别名</div>
            <div class="fr">{{goods.other_name}}</div>
          </div>
          <div class="list">
            <div class="fl">产品编码</div>
            <div class="fr">{{goods.goods_code}}</div>
          </div>
          <div class="list">
            <div class="fl">助记码</div>
            <div class="fr">{{goods.wareabc}}</div>
          </div>
          <div class="list">
            <div class="fl">批准文号</div>
            <div class="fr">{{goods.license_number}}</div>
          </div>
          <div class="list">
            <div class="fl">包装规格/单位</div>
            <div class="fr">{{goods.unit}}</div>
          </div>
          <div class="list">
            <div class="fl">生产企业</div>
            <div class="fr">{{goods.factory}}</div>
          </div>
          <div class="list">
            <div class="fl">品牌</div>
            <div class="fr">{{goods.brand}}</div>
          </div>
        </div>
        <!-- 评价 -->
        <div v-show="tabTxt == 2" class="assess">
          <div class="assessTab">
            <div>全部评价（ {{commentSum.commentsCount}} ）</div>
            <div>有图（ {{commentSum.commentsImgCount}} ）</div>
            <div>好评（ {{commentSum.commentsGoodCount}} ）</div>
            <div>中评（{{commentSum.commentsMiddleCount}} ）</div>
            <div>差评（{{commentSum.commentsBadCount}} ）</div>
          </div>
          <div v-for="(v,i) in goods.comment" :key="i" class="assessMsg">
            <div class="fl">
              <img src="@/assets/image/bg1.jpg" alt />
              用*****户
            </div>
            <div class="fr">
              <p>商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容商品评价文字内容</p>
              <div class="imglist">
                <img src="@/assets/image/bg1.jpg" alt />
                <img src="@/assets/image/bg1.jpg" alt />
                <img src="@/assets/image/bg1.jpg" alt />
              </div>
              <span>2019-10-25 10:26:53</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg1">
      <publicBottom></publicBottom>
    </div>
  </div>
</template>
<script>
import headerTop from "@/components/public/public_headerTop.vue";
import headerMin from "@/components/index/index_header_min";
import publicBottom from "@/components/public/public_bottom";

import { goods_info } from "@/request/index"; //商品详情
import { add_cart } from "@/request/index"; //加入购物车
import {Comment_goods} from "@/request/index"; // 评论
import {getCommentCount} from "@/request/index" // 评论数量

export default {
  components: {
    headerTop,
    headerMin,
    publicBottom
  },
  data() {
    return {
      searchState: 0,
      tabTxt: 0,
      num: 1,
      goods: [],
      shop_id: 0,
      ids: 0,
      commentSum:[], // 评论数量
      commentList:[], //评论
    };
  },
  created() {
    let id = this.$route.query.id;
    this.ids = this.$route.query.id;
    let shop_id = localStorage.getItem("lzyyShopId");
    this.shop_id = shop_id;
    this.start(id);
  },
  methods: {
    cut() {
      if (this.num > 1) {
        this.num--;
      }
    },
    add() {
      if (this.num < 98) {
        this.num++;
      }
    },
    cart_add() {
      if (this.$user.state == 1) {
        let lzyyShopId = localStorage.getItem("lzyyShopId");
        if (lzyyShopId !== null) {
          add_cart({
            token: this.$user.token,
            goods_id: this.ids,
            shop_id: lzyyShopId
          }).then(res => {
            if (res.code == 1) {
              this.$message({
                message: "加入成功",
                type: "success"
              });
            }
          });
        } else {
          this.$message.error("您当前所在的位置没有药店，加入不了购物车");
        }
      } else {
        this.$message.error("请登录后购买");
      }
    },
    GoGoodsOrder() {
      if (this.$user.state == 1) {
        let lzyyShopId = localStorage.getItem("lzyyShopId");
        if (lzyyShopId !== null) {
          this.$router.push({
            path: "/goodsOrder?id=" + this.goods.id + "&num=" + this.num
          });
        } else {
          this.$message.error("您当前所在的位置没有药店，购买不了商品");
        }
      } else {
        this.$message.error("请登录后购买");
      }
    },
    start(id) {
      // 商品信息
      goods_info({
        id: id,
        shop_id: this.shop_id
      }).then(res => {
        this.goods = res.data;
        console.log(this.goods);
      });
      getCommentCount({
          id:id,
      }).then(res=>{
        this.commentSum = res.data
      })
      //  评论 信息
      Comment_goods({
        goods_id:id,

      }).then(res=>{
        this.commentList= res.data
        console.log(123);
        
        console.log(this.commentList);
        
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/index";
</style>